/* pages/work-order/executeRecord/index.wxss */
.creatPage {
    height: 100vh;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.createHeader {
    background: #fff;
}

.creatBody {
    flex-grow: 1;
    height: 0;

    .wrap {
        padding: 24rpx;
    }
}

.form {
    font-size: 24rpx;
    font-weight: 400;
    background: #fff;
    border-radius: 24rpx;
    padding: 24rpx;
    display: flex;
    flex-direction: column;
    gap: 24rpx;

    .more {
        display: flex;
        flex-direction: column;
        gap: 24rpx;
    }

    .red {
        color: #d92400;
    }

    .icon-location {
        font-size: 24rpx;
        padding-left: 16rpx;
        color: #5c9ead;
    }

    .finish {
        display: flex;
        justify-content: flex-end;

        .button {
            color: #058aff;
            font-weight: 600;
        }
    }

    .formItem {
        display: flex;
        flex-direction: column;
        gap: 16rpx;
    }

    .inputBox {
        background: #f8f8f8;
        border-radius: 12rpx;
        display: flex;
        position: relative;

        .placeholder {
            color: #b7b9bd;
        }

        .inputWrap {
            flex-grow: 1;
            line-height: 40rpx;
            padding: 24rpx;
        }

        .input {
            line-height: 40rpx;
        }

        .icon {
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: #adb5bd;
            padding: 0 10rpx;
        }

        .upload {
            height: 200rpx;
            text-align: center;
            display: flex;
            justify-content: center;
            flex-direction: column;
            color: #8b8c8f;
            gap: 16rpx;

            .iconfont {
                font-size: 40rpx;
                color: #5c9ead;
            }
        }

        .stars {

            .iconfont {
                color: #b7b9bd;

                &.color {
                    color: #f9c66a;
                }
            }

        }
    }

    .showMore {
        padding: 44rpx 0;
        text-align: center;
    }

    .selectMap {
        width: 100%;
        height: 286rpx;
    }

    .starList {
        position: absolute;
        background: #fff;
        right: 0;
        top: 0;
        z-index: 2;
        font-size: 28rpx;

        .list {
            display: flex;
            flex-direction: column;
            text-align: center;

            .item {
                line-height: 72rpx;
                padding: 0 30rpx;

                .iconfont {
                    color: #EDEEF0;

                    &.color {
                        color: #f9c66a;
                    }
                }
            }
        }
    }
}

.drawer {
    background: #fff;
    text-align: center;

    .info {
        height: 80rpx;
        line-height: 80rpx;
        border-bottom: #EDEEF0 2rpx solid;
        font-size: 26rpx;
        font-weight: 600;

        &.light {
            color: #adb5bd;
            font-weight: 400;
        }

        &.action {
            border-top: #EDEEF0 18rpx solid;
        }
    }

    .title {
        height: 120rpx;
        line-height: 120rpx;
        font-weight: 600;
        font-size: 36rpx;
    }
}

.sector {
    padding: 24rpx;
    font-size: 24rpx;

    .secHeader {
        display: flex;
        justify-content: space-between;
        padding-bottom: 24rpx;

        .title {
            font-size: 32rpx;
        }

        .add,
        .confirm {
            display: flex;
            flex-direction: column-reverse;
        }

        .add {
            color: #058aff;
        }
    }

    .secSearch {
        background: #F7F7F9;
        color: #808080;
        height: 50rpx;
        line-height: 50rpx;
        display: flex;
        gap: 10rpx;
        padding: 0 20rpx;
        border-radius: 25rpx;

        .inputBox {
            flex-grow: 1;
        }
    }

    .secList {
        padding: 34rpx 0;
        display: flex;
        flex-direction: column;

        .item {
            display: flex;
            justify-content: space-between;
            padding: 17rpx 0;
        }

        .iconfont {
            color: #16c46a;
            display: none;

            &.show {
                display: block;
            }
        }
    }
}

.phoneList,
.invoiceList {
    display: flex;
    flex-direction: column;
    gap: 12rpx;

    .item {
        background: #f8f8f8;
        display: flex;
        justify-content: space-between;
        height: 60rpx;
        line-height: 60rpx;

        .block {
            padding: 0 10rpx;
        }

        .control {
            display: flex;
            flex-direction: column;
            justify-content: center;

            .icon {
                width: 32rpx;
                height: 32rpx;
                border: #adb5bd 2rpx solid;
                border-radius: 50%;
                position: relative;

                &::before {
                    content: '';
                    display: block;
                    width: 20rpx;
                    height: 4rpx;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translateX(-50%) translateY(-50%);
                    background: #adb5bd;
                }
            }
        }
    }
}

.popup {
    .title {
        padding: 24rpx 0;
        text-align: center;
        border-bottom: #EDEEF0 1px solid;
    }

    .popForm {
        .formItem {
            display: flex;
            padding: 24rpx;
            font-size: 24rpx;
            border-top: #f0f0f2 1px dotted;

            .label {
                width: 6em;
                text-align: right;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
        }
    }
}

.toggle {
    height: 50rpx;
    line-height: 48rpx;
    display: flex;
    width: 160rpx;
    font-size: 20rpx;
    border-radius: 12rpx;
    position: relative;

    .block {
        width: 50%;
        text-align: center;
        transition: all .3s;
        background: #EDEEF0;
        border-radius: 10rpx 0 0 10rpx;
        border: #b7b9bd 2rpx solid;

        &.last {
            border-radius: 0 10rpx 10rpx 0;
        }

        &.active {
            background: #b7b9bd;
            color: #fff;
        }
    }

    .badge {
        background: #d92400;
        color: #fff;
        height: 34rpx;
        position: absolute;
        right: -20rpx;
        top: -18rpx;
        text-align: center;
        line-height: 34rpx;
        text-align: center;
        border-radius: 50%;
        padding: 0 10rpx;
    }
}

.user-selector {
    .title {
        border-bottom: #EDEEF0 1px solid;
        display: flex;
        justify-content: center;
        position: relative;

        .text {
            line-height: 88rpx;
            text-align: center;
        }

        .confirm {
            position: absolute;
            right: 48rpx;
            height: 88rpx;
            line-height: 88rpx;
            top: 0;
            color: #058aff;
            font-size: 24rpx;
            font-weight: 600;
        }
    }

    .userList {
        max-height: 640rpx;

    }

    .list {
        font-size: 24rpx;
        padding: 12rpx 0;

        .item {
            display: flex;
            justify-content: space-between;
            padding: 12rpx 48rpx;

            .icon-correct {
                color: #07c160;
            }
        }
    }
}